<!DOCTYPE html>
<html lang="en">
{% load AppBase_tag %}
<head>
    <title>{% sitetitle_tag %}</title>
    <meta charset="utf-8">
    <!--Loading bootstrap css-->
    <link type="text/css" rel="stylesheet"
          href="/static/vendors/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css">
    <link type="text/css" rel="stylesheet" href="/static/vendors/font-awesome/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="/static/vendors/bootstrap/css/bootstrap.min.css">
    <!--Loading style vendors-->
    <link type="text/css" rel="stylesheet" href="/static/vendors/animate.css/animate.css">
    <link type="text/css" rel="stylesheet" href="/static/vendors/iCheck/skins/all.css">
    <!--Loading style-->
    <link type="text/css" rel="stylesheet" href="/static/css/themes/style1/pink-blue.css" class="default-style">
    <link rel="stylesheet" type="text/css" href="/static/css/verify.css">
    <style>
        /******************************* 其他样式 *******************************/
        /*错误提示*/
        .err {
            float: left;
            height: 20px;
            line-height: 20px;
            text-align: right;
            font-size: 12px;
            width: 100%;
            color: red;
            display: none;
            position: absolute;
            left: 0px;
        }

        .err img {
            margin-top: 2px;
            margin-right: 2px;
        }

        .err-top40 {
            top: 40px;
        }

        .err-top20 {
            top: 20px;
        }

        .err-top160 {
            top: 160px;
        }

        .err-top90 {
            top: 90px;
        }

        /*上传*/
        #reg_info_file_base64 {
            filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
        }

        /*登录*/
        .login-box-cen {
            width: 240px;
            border: 1px solid #cccccc;
            margin: 0px auto 0px;
            height: 318px;
            border-radius: 10px;
            padding: 0 64px;
            background: #fff;
        }

        .login-box-cen-ti {
            height: 76px;
            line-height: 76px;
            text-align: center;
            color: #222222;
            font-size: 16px
        }

        .login-box-cen-form {
            position: relative;
        }

        .login-box-cen-form-input {
            float: left;
            padding-left: 20px;
            border: 1px solid #ccc;
            height: 38px;
            line-height: 38px;
            font-size: 14px;
            color: #999999;
        }

        .login-box-cen-form-button {
            float: left;
            height: 40px;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            text-align: center;
            background: #207fb3;
            cursor: pointer;
        }

        .login-box-cen-form-ot {
            height: 30px;
            line-height: 30px;
            text-align: right;
            font-size: 12px;
        }

        .login-box-cen-form-ot span {
            color: #999999;
        }

        .login-box-cen-form-ot a {
            color: #207fb3;
        }

        .w218 {
            width: 218px;
        }

        .w238 {
            width: 238px;
        }

        .mar-bottom10 {
            margin-bottom: 10px;
        }

        /*注册*/
        .register-box-step {
            height: 30px;
            margin: 0px auto;
            width: 382px;
            padding: 40px 0;
        }


        .register-box-step em {
            float: left;
            width: 130px;
            background: #207fb3;
            margin-top: 13px;
            height: 2px;
        }

        .register-box-step-first {
            margin-left: 16px;
        }

        .register-box-con {
            width: 380px;
            padding: 0 310px;
            background: #fff;
            padding-bottom: 180px;
        }

        .register-box-con-ti {
            height: 114px;
            line-height: 114px;
            text-align: center;
            font-size: 14px;
            color: #222222;
            letter-spacing: 1px;
        }

        .login-box-cen-form-img {
            float: left;
            height: 40px;
            line-height: 40px;
            overflow: hidden;
            background: #207fb3;
        }

        .login-box-cen-form-mes {
            float: left;
            border: none;
            height: 40px;
            line-height: 40px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            background: #207fb3;
            cursor: pointer;
            border-radius: 5px;
        }

        .register-box-cen-form {
            position: relative;
        }

        .register-box-cen-form-xieyi {
            height: 16px;
            line-height: 16px;
        }


        .register-box-cen-form-xieyi span.ok {
            background-position: -17px 0px;
        }

        .register-box-cen-form-xieyi em {
            display: inline-block;
            height: 16px;
            line-height: 16px;
            vertical-align: top;
            font-size: 14px;
        }

        .register-box-cen-form-xieyi a {
            color: #207fb3;
        }

        .register-box-con2-box {
        }

        .register-box-con2-box-left {
            height: 40px;
            line-height: 40px;
            text-align: right;
            float: left;
            width: 293px;
            color: #222222;
            font-size: 16px;
        }

        .register-box-con2-box-left strong {
            font-weight: bold;
        }

        .register-box-con2-box-right {
            float: left;
            width: 380px;
            margin-left: 20px;
            position: relative;
        }

        .register-box-con2-box-right .register-box-con2-box-right-text {
            font-size: 16px;
            color: #207fb3;
            margin-left: 20px;
            line-height: 40px;
        }

        .login-box-cen-form-textarea {
            float: left;
            padding-left: 20px;
            border: 1px solid #ccc;
            line-height: 38px;
            font-size: 14px;
            color: #999999;
            resize: none;
        }

        .register-box-con2-box-upload {
            position: relative;
            width: 165px;
            height: 98px;
            float: left;
            border: 1px solid #ccc;
            margin-bottom: 12px;
            float: left;
        }

        .register-box-con2-box-upload .register-box-con2-box-upload-ti {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 165px;
            height: 98px;
            text-align: center;
            line-height: 98px;
            font-size: 18px;
            color: #207fb3;
            z-index: 9;
            overflow: hidden;
            text-align: center;
            display: table-cell;
        }

        .register-box-con2-box-upload .register-box-con2-box-upload-ti img {
            vertical-align: middle;
        }

        .register-box-con2-box-upload input {
            position: absolute;
            left: 0px;
            top: 0px;
            width: 165px;
            z-index: 99;
            opacity: 0;
            filter: alpha(opacity=0);
        }

        .register-box-con2-box-pw {
            height: 25px;
            line-height: 25px;
            font-size: 14px;
            color: #222222;
            float: left;
            width: 380px;
        }


        .register-box-con-good img {
            display: block;
            margin: 0 auto;
        }

        .register-box-con-good-p1 {
            font-size: 18px;
            padding: 40px 0 20px;
            text-align: center;
            line-height: 20px;
            font-weight: 500;
        }

        .register-box-con-good-p2 {
            font-size: 14px;
            text-align: center;
            line-height: 26px;
        }

        .w358 {
            width: 358px;
        }

        .w228 {
            width: 228px;
        }

        .w120 {
            width: 120px;
        }

        .w380 {
            width: 380px;
        }

        .w278 {
            width: 278px;
        }

        .h88 {
            height: 88px;
        }

        .mar-top50 {
            margin-top: 50px;
        }

        .mar-left10 {
            margin-left: 10px;
        }

        .mar-bottom20 {
            margin-bottom: 20px;
        }

        .bitian {
            color: #dc2b2b;
        }
    </style>
</head>

<body id="signin-page">
<div class="page-form">
    <form action="#" class="form" method="post" id="pwd_form">
        <div class="header-content">
            <h1>登陆</h1>
        </div>
        <div class="body-content">
            <div class="form-group">
                <div class="input-icon right"><i class="fa fa-user"></i>
                    <input type="text" placeholder="用户名" name="username" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <div class="input-icon right"><i class="fa fa-key"></i>
                    <input type="password" placeholder="密码" name="password" class="form-control">
                </div>
            </div>
            <div class="form-group">
                <div id="mpanel2"></div>
            </div>
            <div class="form-group pull-right">
                <button type="button" id="check-btn" class="btn btn-success">登陆 &nbsp;
                    <i class="fa fa-chevron-circle-right"></i></button>
                <button type="button" id="check-btn" class="btn btn-info" onclick="changeWay('phone')">短信登陆 &nbsp;
                    <i class="fa fa-chevron-circle-right"></i></button>
            </div>
            <div class="clearfix"></div>
            <div class="forget-password">
                <h4>忘记密码?</h4>
                <p>别担心, 点击 <a href="{% url 'findpassword' %}" class='btn-forgot-pwd'>这里</a> 找回密码.</p>
            </div>
            <hr>
            <p>没有账号? <a id="btn-register" href="{% url "register" %}">马上注册</a>
            </p>
        </div>
    </form>
    <form action="#" class="form" method="post" id="phone_form">
        <div class="header-content">
            <h1>手机号登陆</h1>
        </div>
        <div class="body-content">
            <div class="form-group">
                <div class="wrap">

                    <div class="register-box-cen-form clearfix mar-bottom20">
                        <input type="text" class="login-box-cen-form-input w358" placeholder="手机号"
                               id="reg_phone" name="phonenum"/>
                        <label class="err err-top40" id="reg_phone_text">手机号错误</label>
                    </div>
                    <div class="register-box-cen-form clearfix mar-bottom20">
                        <input type="text" class="login-box-cen-form-input w228" placeholder="短信验证码"
                               id="reg_mescode" name="mescode"/>
                        <button type="button" class="login-box-cen-form-mes w120 mar-left10" id="reg_mescode_btn"
                                able="able">
                            获取验证码
                        </button>
                        <label class="err err-top40" id="reg_mescode_text">短信验证码错误</label>
                    </div>

                </div>
            </div>

            <div class="form-group pull-right">
                <button type="button" class="btn btn-success" onclick="messageLogin()">登陆 &nbsp;
                    <i class="fa fa-chevron-circle-right"></i></button>
                <button type="button" class="btn btn-info" onclick="changeWay('')">账号登陆 &nbsp;
                    <i class="fa fa-chevron-circle-right"></i></button>
            </div>
            <div class="clearfix"></div>
            <div class="forget-password">
                <h4>忘记密码?</h4>
                <p>别担心, 点击 <a href="{% url 'findpassword' %}" class='btn-forgot-pwd'>这里</a> 找回密码.</p>
            </div>
            <hr>
            <p>没有账号? <a id="btn-register" href="{% url "register" %}">马上注册</a>
            </p>
        </div>
    </form>

    <div id="modal-alert" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>温馨提示</h4>
                </div>
                <div class="modal-body">
                    验证码错误！
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-primary">Ok</button>
                </div>
            </div>
        </div>
    </div>
    <div id="modal-alert-error" tabindex="-1" role="dialog" aria-hidden="true" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" data-dismiss="modal" aria-hidden="true"
                            class="close">&times;
                    </button>
                    <h4 id="modal-default-label" class="modal-title">温馨提示</h4>
                </div>
                <div class="modal-body" style="color: red;"><h4 id="errormessage" style="text-align: center"></h4>
                </div>
                <div class="modal-footer">
                    <button type="button" data-dismiss="modal" class="btn btn-primary">Ok</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="/static/js/jquery-migrate-1.2.1.min.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<!--loading bootstrap js-->
<script src="/static/vendors/bootstrap/js/bootstrap.min.js"></script>
<script src="/static/vendors/bootstrap-hover-dropdown/bootstrap-hover-dropdown.js"></script>
<script src="/static/js/html5shiv.js"></script>
<script src="/static/js/respond.min.js"></script>
<script src="/static/vendors/iCheck/icheck.min.js"></script>
<script src="/static/vendors/iCheck/custom.min.js"></script>
<script type="text/javascript" src="/static/js/verify.js"></script>
<script>
    $("#phone_form").hide();
    //BEGIN CHECKBOX & RADIO
    $('input[type="checkbox"]').iCheck({
        checkboxClass: 'icheckbox_minimal-grey',
        increaseArea: '20%' // optional
    });
    $('input[type="radio"]').iCheck({
        radioClass: 'iradio_minimal-grey',
        increaseArea: '20%' // optional
    });
    //END CHECKBOX & RADIO
    $('#mpanel2').codeVerify({
        type: 1,
        width: '400px',
        height: '50px',
        fontSize: '30px',
        codeLength: 6,
        btnId: 'check-btn',
        ready: function () {
        },
        success: function () {

            var data = new FormData($('#pwd_form')[0]);
            var xhr = new XMLHttpRequest();
            xhr.open('POST', "{% url 'login' %}", true);  //请将url改成上传url
            xhr.setRequestHeader('X-CSRFTOKEN', '{{ request.COOKIES.csrftoken }}');   //此处为Django要求，可无视，或者换成相应后台所要求的CSRF防护，不是django用户请去掉
            xhr.send(data);   //发送表单
            xhr.onreadystatechange = () => {
                if (xhr.readyState == 4 || xhr.readyState == "complete") {
                    var resdata = JSON.parse(xhr.responseText);
                    console.log(resdata);
                    if (resdata.code == 200) {
                        window.location.href = "{% url 'index'  %}";
                    } else {
                        document.getElementById("errormessage").innerHTML = resdata.message;
                        $('#modal-alert-error').modal('show');
                    }

                }

            }
        },
        error: function () {
            document.getElementById("errormessage").innerHTML = "验证码错误！";
            $('#modal-alert-error').modal('show');
        }
    });

    function messageLogin() {

        var data = new FormData($('#phone_form')[0]);
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "{% url 'messagelogin' %}", true);  //请将url改成上传url
        xhr.setRequestHeader('X-CSRFTOKEN', '{{ request.COOKIES.csrftoken }}');   //此处为Django要求，可无视，或者换成相应后台所要求的CSRF防护，不是django用户请去掉
        xhr.send(data);   //发送表单
        xhr.onreadystatechange = () => {
            if (xhr.readyState == 4 || xhr.readyState == "complete") {
                var resdata = JSON.parse(xhr.responseText);
                console.log(resdata);
                if (resdata.code == 200) {
                    window.location.href = "{% url 'index'  %}";
                } else {
                    document.getElementById("errormessage").innerHTML = resdata.message;
                    $('#modal-alert-error').modal('show');
                }

            }

        }

    }

    //转换登录方式
    function changeWay(way) {
        if (way == "phone") {
            $("#pwd_form").hide();
            $("#phone_form").show();
        } else {
            $("#pwd_form").show();
            $("#phone_form").hide();
        }
    }

    //获取短信验证码
    var regconfig = [
        {
            eleinput: "login_phone",
            eletext: "login_phone_text",
            rule: [{reg: /^.+$/, text: "手机号不能为空"}, {reg: /^1[345789]\d{9}$/, text: "手机号格式错误"}]
        },
        {eleinput: "login_password", eletext: "login_password_text", rule: [{reg: /^.+$/, text: "密码不能为空"}]}
    ];
    var mesdong = null;
    var mestime = 60;
    $("#reg_mescode_btn").click(function () {
        var phoneval = $.trim($("#reg_phone").val());
        if (regconfig[0].rule[0].reg.test(phoneval)) {
            $("#reg_phone_text").hide();
        } else {
            $("#reg_phone_text").html(regconfig[0].rule[0].text).show();
            $("#reg_phone").focus();
            return false
        }
        ;
        if (regconfig[0].rule[1].reg.test(phoneval)) {
            $("#reg_phone_text").hide();
        } else {
            $("#reg_phone").focus();
            $("#reg_phone_text").html(regconfig[0].rule[1].text).show();
            return false
        }
        ;
        if ($(this).attr('able') == "able") {//发送
            $(this).attr('able', "disable");
            $(this).css('cursor', 'not-allowed');
            $(this).html(mestime + "s");
            mesdong = setInterval(function () {//倒计时
                mestime -= 1;
                if (mestime < 0) {
                    $("#reg_mescode_btn").attr('able', "able");
                    $("#reg_mescode_btn").css('cursor', 'pointer');
                    $("#reg_mescode_btn").html('获取验证码');
                    mestime = 60;
                    clearInterval(mesdong);
                } else {
                    $("#reg_mescode_btn").html(mestime + "s");
                }
                ;
            }, 1000);
            //短信发送接口
            //发送请求
            let postdata = {"phonenum": phoneval};
            $.ajax({
                type: "POST",
                url: "{% url 'sendmessage'%}",
                dataType: 'json',
                data: postdata,
                success: function (result) {

                    if (result.code == 200) {

                    } else {
                        document.getElementById("errormessage").innerHTML = result.message;
                        $('#modal-alert-error').modal('show');
                    }

                }
            });

        } else {

        }
        ;
    });


</script>

</body>

</html>